<template>
	<view class="purchase">
		<Hearder :name="'抢购专区'" :membertoken="baseinfo.member_token"></Hearder>
		<u-transition :show="show">
			<image :src="baseinfo.purchase_img" class="cont_img" mode="widthFix"></image>
		</u-transition>
		<u-transition :show="show">
			<view class="conent">
				<view class="showtime">{{baseinfo.day_time}} {{$u.timeFormat(new_time, 'hh:MM:ss')}}  {{baseinfo.week}}</view>
				<view class="sml-con">
					<view class="tips"><text class="xing">*</text>选择专区预约后即可参加<text class="yuyue">(预约消耗门票)</text></view>
					<view class="special-con">
						<view class="area-every" v-if="loading">
							<view class="area-top">
								<u-skeleton
									rows="2"
									:title="false"
									:rowsHeight="['50rpx','50rpx']"
									:rowsWidth="['80%','50%']"
									:loading="loading"
									animate
								></u-skeleton>
								<view class="area-right nokaishi">
									<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['50rpx']"
										:rowsWidth="['100%']"
										:loading="loading"
										animate
									></u-skeleton>
								</view>
							</view>
						</view>
						<view class="area-every" v-for="(item,index) in dataList" :key="index" v-if="item.open_status==10 && !loading">
							<u-transition :show="show">
								<image :src="item.bgimg" class="cont_img" mode="widthFix"></image>
							</u-transition>
							<view class="area-top">
								<view class="area-left">
									<view>
										{{item.title}}
										<text v-if="item.time.start_time1 <= item.time.new_time && item.time.new_time <= item.time.end_time1">营业中</text>
										<text v-if="item.time.reserve_start_time > item.time.new_time || item.time.new_time > item.time.end_time1">未开始</text>
										<text v-if="item.time.reserve_start_time <= item.time.new_time && item.time.new_time <= item.time.reserve_end_time">预约中</text>
									</view>
									<view>
										<view>预约时间：{{item.time.reserve_start_time_text}}~{{item.time.reserve_end_time_text}}</view>
										<view>入场时间：{{item.time.start_time}}~{{item.time.end_time}}</view>
									</view>
								</view>
								<view class="area-right" v-if="item.time.reserve_start_time <= item.time.new_time && item.time.new_time <= item.time.reserve_end_time && item.is_subscribe==0"
								@click="ljyuyue(item.specialarea_type)">预约</view>
								<view class="area-right nokaishi" v-if="item.time.new_time > item.time.reserve_end_time && item.time.new_time <= item.time.end_time1  && item.is_subscribe==0">未预约</view>
								<view class="area-right nokaishi" v-if="(item.time.reserve_start_time > item.time.new_time || item.time.new_time > item.time.end_time1) 
								|| (item.time.reserve_start_time <= item.time.new_time && item.time.new_time <= item.time.start_time1 && item.is_subscribe==1 && baseinfo.reserve_switch==0)">未开始</view>
								<view class="area-right nokaishi" v-if="item.time.reserve_start_time <= item.time.new_time && item.time.new_time <= item.time.start_time1 && item.is_subscribe==1 && baseinfo.reserve_switch==1">已预约</view>
								<view class="area-right ljqiangg" v-if="item.time.start_time1 <= item.time.new_time && item.time.new_time <= item.time.end_time1 && item.is_subscribe==1"
								@click="toPage('listProduct?specialarea_type='+item.specialarea_type+'&title='+item.title)">进场</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-transition>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	var timer;
	export default {
		data(){
			return{
				timer:null,
				new_time:0,
				baseinfo:{},
				showLogin: false,
				show: true,
				loading: true,
				dataList:[]
			}
		},
		onLoad() {
			if(this.timer!=null){
				clearInterval(this.timer)
			}
			this.getList()
			this.getinit()
			timer = setInterval(()=>{
				this.getinit()
			},5000)
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null;
		},
		methods:{
			getList(){
				this.request('/goods/getSpecialarea').then(res => {
					if (res.data.code == -500) {
						this.showLogin = true
					}
					if(res.data.code==1){
						this.baseinfo = res.data.data
						this.new_time = res.data.data.new_time
						this.getinit()
						this.timer = setInterval(()=>{
							if(this.new_time<res.data.data.next_day_time){
								this.new_time++
							}else{
								clearInterval(this.timer)
								this.timer = null
								this.getList()
							}
						},1000)
					}
					this.loading = false;
				})
			},
			getinit(){
				var that = this
				let routes = getCurrentPages();
				
				if(routes[routes.length - 1].route!='pages/loot/purchase'){
					clearInterval(timer)
					clearInterval(this.timer)
					return
				}
				this.request('/goods/getLootList').then(res => {
					if(res.data.code==1){
						res.data.data.map((value,index)=>{
							if(this.baseinfo.reserve_switch==0){
								value.is_subscribe = 1
							}
							value.bgimg = '../../static/images/99'+(index+7)+'.png'
						})
						this.dataList = res.data.data
					}
					this.loading = false;
				})
			},
			ljyuyue(specialarea_type){
				this.request('/goods/getAppointment',{specialarea_type:specialarea_type}).then(res => {
					if(res.data.code==1){
						clearInterval(timer)
						setTimeout(()=>{
							uni.navigateTo({
								url: 'subscribe?specialarea_type='+specialarea_type
							})
						},100)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			loginhidden(data) {
				this.showLogin = data
			},
			toPage(route){
				clearInterval(timer)
				// clearInterval(this.timer)
				setTimeout(()=>{
					uni.navigateTo({
					    url: route
					});
				},100)
			}
		}
	}
</script>

<style scoped lang="scss">
	.purchase{
		min-height: 100%;
		background: #F8F8F8;
		.cont_img{
			width: 100%;
		}
		.conent{
			position: relative;
			margin-top: -170rpx;
			.showtime{
				font-size: 26rpx;
				color: #FFE8C6;
				text-shadow: 5rpx 10rpx 20rpx rgba(218,48,49,0.75);
				margin-left: 5%;
			}
			.sml-con{
				background: #F8F8F8;
				margin-top: 100rpx;
				border-radius: 30rpx 30rpx 0 0;
				.tips{
					font-size: 28rpx;
					padding: 40rpx 4% 32rpx;
					text{
						font-size: 28rpx;
					}
					.xing{
						color: $uni-text-color;
					}
					.yuyue{
						color: #999;
					}
				}
				.special-con{
					margin: 0 4%;
					.area-every{
						position: relative;
						margin-bottom: 30rpx;
						.cont_img{
							width: 100%;
						}
						.area-top{
							position: absolute;
							width: 92%;
							height: 100%;
							top: 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 4%;
							.area-left{
								>view{
									color: #fff;
									&:first-of-type{
										font-size: 36rpx;
										font-weight: 800;
										text{
											position: relative;
											top: -2rpx;
											display: inline-block;
											width: 86rpx;
											height: 34rpx;
											border: 1rpx solid #fff;
											font-size: 24rpx;
											color: #fff;
											text-align: center;
											line-height: 34rpx;
											font-weight: 400;
											margin-left: 20rpx;
										}
									}
									&:last-of-type{
										margin-top: 28rpx;
										view{
											font-size: 26rpx;
											color: rgba(255,255,255,0.7);
											&:last-of-type{
												margin-top: 8rpx;
											}
										}
									}
								}
							}
							.area-right{
								width: 150rpx;
								height: 60rpx;
								background: #fff;
								border-radius: 60rpx;
								box-sizing: border-box;
								color: #F99E14;
								font-size: 28rpx;
								text-align: center;
								line-height: 60rpx;
								font-weight: 800;
							}
							.nokaishi{
								background: transparent;
								border: 1rpx solid #fff;
								color: #fff;
							}
							.ljqiangg{
								color: #7487F5;
							}
						}
					}
				}
			}
		}
	}
</style>